<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>
        <ui:composition template="./main-template.xhtml">
            <ui:param name="titulo" value="HOME ADMINISTRADOR" />
            <ui:param name="lbTabUno" value="Administrar personas" />
            <ui:param name="lbTabDos" value="Cuenta y Reportes" />
            <ui:define name="tabUno">
                <center>
                    <a4j:form>
                        <rich:contextMenu attached="false" id="menu" submitMode="ajax">
                            <rich:menuItem ajaxSingle="true" id="itemEliminar" icon="/img/delete-icon.png" >
                                Eliminar <b>{id}</b>
                                <a4j:actionparam id="ref" name="det" assignTo="#{PersonasBean.user.id}" value="{id}"/>
                                <rich:componentControl for="panelConfirmacion" attachTo="itemEliminar" operation="show" event="onclick"/>
                            </rich:menuItem>
                            <rich:menuItem ajaxSingle="true" id="itemEditar" icon="/img/edit-icon.png">
                                Editar <b>{id}</b>
                                <a4j:actionparam name="det" assignTo="#{PersonasBean.user.id}" value="{id}" />
                                <rich:componentControl for="panelEditar" attachTo="itemEditar" operation="show" event="onclick"/>
                            </rich:menuItem>
                        </rich:contextMenu>

                        <h:panelGroup>
                             <h:panelGrid columns="2">
                                <h:inputText id="keyword" />
                                <h:commandButton value="Buscar" />
                            </h:panelGrid>
                            <rich:panelBar>
                                <rich:panelBarItem label="Catálogo de Personas">
                                    <rich:extendedDataTable id="tblPersonas" value="#{PersonasBean.personas}" var="p" >
                                        <rich:column sortable="true" sortBy="#{p.id}" id="col_id" filterBy="#{p.id}" label="id" >
                                            <f:facet name="header">
                                                <h:outputText value="ID" id="id" />
                                            </f:facet>
                                            <h:outputText value="#{p.id}" id="p_id"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.nombre}" id="col_nombre" filterBy="#{p.nombre}" label="nombre">
                                            <f:facet name="header">
                                                <h:outputText value="Nombre" id="nombre" />
                                            </f:facet>
                                            <h:outputText value="#{p.nombre}" id="p_nombre"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.apellido}" id="col_apellido" filterBy="#{p.apellido}" label="apellido">
                                            <f:facet name="header">
                                                <h:outputText value="Apellido" id="apellido" />
                                            </f:facet>
                                            <h:outputText value="#{p.apellido}" id="p_apellido"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.tipoDoc}" id="col_tipoDoc" filterBy="#{p.tipoDoc}" label="tipoDocumento">
                                            <f:facet name="header">
                                                <h:outputText value="Tipo de documento" id="tipoDoc" />
                                            </f:facet>
                                            <h:outputText value="#{p.tipoDoc}" id="p_tipoDoc"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.numDocumento}" id="col_numDocumento" filterBy="#{p.numDocumento}" label="numero documento">
                                            <f:facet name="header">
                                                <h:outputText value="Número de documento" id="numDocumento" />
                                            </f:facet>
                                            <h:outputText value="#{p.numDocumento}" id="p_numDocumento"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.estatura}" id="col_estatura" filterBy="#{p.estatura}" label="estatura">
                                            <f:facet name="header">
                                                <h:outputText value="Estatura(metros)" id="estatura" />
                                            </f:facet>
                                            <h:outputText value="#{p.estatura}" id="p_estatura"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.peso}" id="col_peso" filterBy="#{p.peso}" label="peso">
                                            <f:facet name="header">
                                                <h:outputText value="Peso(g)" id="peso" />
                                            </f:facet>
                                            <h:outputText value="#{p.peso}" id="p_peso"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.tipoPelo}" id="col_tipoPelo" filterBy="#{p.tipoPelo}" label="tipo de pelo" visible="false">
                                            <f:facet name="header">
                                                <h:outputText value="Tipo de pelo" id="tipoPelo" />
                                            </f:facet>
                                            <h:outputText value="#{p.tipoPelo}" id="p_tipoPelo"/>
                                        </rich:column>
                                        <rich:column sortable="true" sortBy="#{p.colorPelo}" id="col_colorPelo" filterBy="#{p.colorPelo}" label="color de pelo" visible="false">
                                            <f:facet name="header">
                                                <h:outputText value="Color de pelo" id="colorPelo" />
                                            </f:facet>
                                            <h:outputText value="#{p.colorPelo}" id="p_colorPelo"/>
                                        </rich:column>
                                        <f:facet name="footer">
                                            <rich:datascroller renderIfSinglePage="false" maxPages="5" />
                                        </f:facet>

                                        <rich:componentControl event="onRowClick" for="menu" operation="show">
                                            <f:param value="#{p.id}" name="id"/>
                                        </rich:componentControl>

                                    </rich:extendedDataTable>
                                </rich:panelBarItem>
                                <rich:panelBarItem label="Registro de Personas">
                                    registrooooooooo
                                </rich:panelBarItem>
                            </rich:panelBar>
                        </h:panelGroup>
                        <h:commandButton id="cerrarSesion" value="Cerrar Sesión"/>
                    </a4j:form>
                </center>
                
            </ui:define>
            <ui:define name="tabDos">
                <center>
                    <a4j:form id="info">
                        <rich:panel id="panelTabAdmin">
                            <f:facet name="header">
                                Opciones
                            </f:facet>
                            <rich:panelBar>
                                <rich:panelBarItem label="Reportes">
                                    <center>
                                        <h:panelGrid columns="2">
                                            <rich:panel>
                                                <f:facet name="header">
                                                    Generar Reporte por criterios
                                                </f:facet>
                                                <center>
                                                    <h:commandButton id="btnReporteCri" image="/img/Notepad-icon.png" />
                                                </center>
                                                <rich:toolTip followMouse="true" direction="top-right" showDelay="500">
                                                    <span>
                                                        Generar reporte con base en diferentes criterios como:<br/>
                                                        color de ojos, estatura, edad, etc.
                                                    </span>
                                                </rich:toolTip>
                                            </rich:panel>
                                            <rich:panel>
                                                <f:facet name="header">
                                                    Generar reporte completo
                                                </f:facet>
                                                <center>
                                                    <h:commandButton id="btnReporte" image="/img/Ebook-icon.png"/>
                                                </center>
                                                <rich:toolTip followMouse="true" direction="top-right" showDelay="500">
                                                    <span>
                                                        Generar reporte completo de los registros del sistema.
                                                    </span>
                                                </rich:toolTip>
                                            </rich:panel>
                                        </h:panelGrid>
                                    </center>
                                </rich:panelBarItem>
                                <rich:panelBarItem label="Cuenta">
                                    Informacioón de la cuenta
                                </rich:panelBarItem>
                            </rich:panelBar>
                         </rich:panel>
                         <h:commandButton id="cerrarSesion" value="Cerrar Sesión"/>
                    </a4j:form>
                </center>
                <rich:modalPanel id="panelConfirmacion" resizeable="false" autosized="true">
                        <f:facet name="header">Eliminar</f:facet>
                        <h:outputText value="¿Está seguro que desea eliminar a esta persona del sistema?"/>
                    <h:form>
                        <h:panelGrid columns="2" cellspacing="10" >
                            <a4j:commandButton id="btnAceptar" value="Aceptar" action="#{PersonasBean.eliminarPersona}" reRender="tblPersonas"/>
                            <a4j:commandButton id="btnCancelar" value="Cancelar"/>
                            <rich:componentControl for="panelConfirmacion" attachTo="btnAceptar" operation="hide" event="onclick"/>
                            <rich:componentControl for="panelConfirmacion" attachTo="btnCancelar" operation="hide" event="onclick"/>
                        </h:panelGrid>
                    </h:form>
                </rich:modalPanel>
                <rich:modalPanel id="panelEditar" resizeable="false" autosized="true">
                        <f:facet name="header">Editar</f:facet>
                        <h:outputText value="¿Está seguro que desea eliminar a esta persona del sistema?"/>
                    <h:form>
                        <h:panelGrid columns="2" >
                            <a4j:commandButton id="btnAceptar" value="Aceptar" action="#{PersonasBean.eliminarPersona}" reRender="tblPersonas"/>
                            <a4j:commandButton id="btnCancelar" value="Cancelar"/>
                            <rich:componentControl for="panelConfirmacion" attachTo="btnAceptar" operation="hide" event="onclick"/>
                            <rich:componentControl for="panelConfirmacion" attachTo="btnCancelar" operation="hide" event="onclick"/>
                        </h:panelGrid>
                    </h:form>
                </rich:modalPanel>
            </ui:define>
        </ui:composition>
    </body>
</html>

